<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>			
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="edit">注册</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="!edit">商户资料</view>
			<view class="card">
				<view class="input_line">
					<text>优惠期名称</text>
					<input class="input" type="text"  v-model="coupon.name"/>
				</view>
				<!-- #ifdef H5 -->
				<view class="input_line">
					<text>优惠券类型</text>
					<radio-group v-model="coupon.type" @change="typeChange">
						<label v-for="(item, index) in radioItems" :key="index" style="margin-left: 40rpx;">
							{{item.label}}	
							<radio :value="item.value"/>						
						</label>
					</radio-group>
				</view>
				<!-- #endif -->
				
				<view class="dis_count" v-if="coupon.type==2">
					<view style="display: flex;justify-content: end;">
						打<input class="input_num" type="text"  v-model="coupon.discount"/>折
					</view>
				</view>
				<view class="dis_count" v-if="coupon.type==1">
					<view style="display: flex;justify-content: end;">
					满<input class="input_num" type="text" v-model="coupon.triggerMoney"/>元
					减<input class="input_num" type="text" v-model="coupon.preferentialMoney"/>元
					</view>
				</view>
				<view class="dis_count" v-if="coupon.type==''">&nbsp; </view>
				<view class="input_line">
					<text>发放开始时间</text>
					<view>
						<uni-datetime-picker type="date" v-model="coupon.start"/>
					</view>
					<!-- <input class="input" type="text"  v-model="coupon.start"/> -->
				</view>
				<view class="input_line" >
					<text>发放结束时间</text>
					<view>
						<uni-datetime-picker type="date" v-model="coupon.end"/>
					</view>
					<!-- <input class="input" type="text"  v-model="coupon.end"/> -->
				</view>
				<view class="input_line">
					<text>投放数量</text>
					<input class="input_s" type="text" v-model="coupon.num"/>张
				</view>
				<view class="input_line">
					<text>每人限领</text>
					<input class="input_s" type="text" v-model="coupon.size"/>张
				</view>
				<!-- <view class="input_line">
					<text>使用有效期</text>
					<input class="input" type="text" v-model="coupon.time"/>
				</view> -->
			</view>
		</view>	
		<view style="height: 500rpx;"></view>
		<button @click="toIndex()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">确认投放</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import request from '../../../../utils/request.js';

	const mid = ref(0)
	const coupon = ref({
		source: 1,
		mid: 0,
		name: '',
		type: '',
		discount:'',
		triggerMoney: 100,
		preferentialMoney: 20,
		start:'',
		end:'',
		num: 0,
		size: 1,
		time:''
	})
	
	
onLoad((options)=>{
	console.log(options)
	mid.value=options.mid
})
	function backPage(){
		uni.navigateBack()
	}
const youhui_type = ref([
  { label: '折扣券', value: '折扣券' },
  { label: '满减券', value: '满减券' }
])
const youhui_name = ref([
  { label: '新用户优惠券', value: '新用户优惠券' },
  { label: '节假日优惠券', value: '节假日优惠券' },
  { label: '商家优惠券', value: '商家优惠券' } 
])

	
	const radioItems = ref(
		[{
			label: '满减券', value: 1
		},
		{
			label: '打折券', value: 2
		}]
	)


	const typeChange= (event) => {
		// console.log('选择的值是:', event.detail.value);
		if(event.detail.value==1){
			coupon.value.type = 1
		}else{
			coupon.value.type = 2
		}
		
	}
	
	function toIndex(){
		request({
			url: 'yyq/coupon',
			data: coupon.value,
			method: 'POST',
			success(res) {
				console.log(res);
				// 比较时间并更新优惠券状态
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
		});

	}
	
	function onLogin(){
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
	
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.input_line{ font-weight: 500; margin: 30rpx 10rpx; padding-left: 20rpx; display: flex; justify-content: space-between; align-items: center;}
.input{ border: 1px solid gray; padding: 10rpx 15rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600; }
.input_num{ border: 1px solid gray; padding: 10rpx 15rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600; width: 50rpx;text-align: center;}
.input_s{ border: 1px solid gray; padding: 10rpx 15rpx; margin-left: 75rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600;  width: 150rpx; }
.big_title{margin-left: 20rpx; font-weight: 600;}	    
.upload-box {display: flex;flex-direction: column; align-items: center;cursor: pointer;}
.plus-icon {font-size: 40px; color: #ccc; margin-bottom: 10px;}
.upload-text {font-size: 12px; color: #999;}
.dis_count { text-align: end; margin-right: 50rpx; }

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
</style>

